<template>
    <el-scrollbar>
        <el-row :gutter="1">
            <el-col :span="16">
                <el-row style="padding: 10px; background: linear-gradient(180deg, rgb(56 162 249), rgb(155 255 255))" justify="space-between">
                    <el-col :span="10">
                        <span style="font-size: 20px; font-weight: 1000; color: rgb(73 81 97)"
                        @click="test()"
                            ><el-icon><Menu /></el-icon>{{ $t("核心功能") }}</span
                        >
                    </el-col>
                </el-row>
                <div style="padding: 10px;background-color:white">
                    <el-row :gutter="5">
                        <el-col :span="4" v-for="item in functions">
                            <el-card class="flex-container" @click="Gotopath(item)">
                                <div class="flex-item">
                                    <el-icon size="30">
                                        <component :is="iconMap.iconData[item.icon]"></component>
                                    </el-icon>
                                </div>
                                <div class="flex-item">
                                    <span>{{ $t(item.name) }}</span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8">
                <el-row style="padding: 10px; background: linear-gradient(180deg, rgb(56 162 249), rgb(155 255 255))" justify="space-between">
                    <el-col :span="10">
                        <span style="font-size: 20px; font-weight: 1000; color: rgb(73 81 97)"
                            ><el-icon><Comment /></el-icon>{{ $t("公告") }}</span
                        >
                    </el-col>
                </el-row>
               <div style="padding: 10px;background-color:white">
                    <el-carousel motion-blur>
                        <el-carousel-item>
                            <div class="block">
                                <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" />
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="block">
                                <el-image src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg" />
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="block">
                                <el-image src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" />
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div class="block">
                                <el-image src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" />
                            </div>
                        </el-carousel-item>
                    </el-carousel>
               </div>
            </el-col>
        </el-row>

        <el-row :gutter="0">
            <el-col :span="6">
                <el-card style="background: linear-gradient(180deg, rgb(56 162 249), rgb(155 255 255))">
                    <el-statistic :value="1024">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                {{ $t("总用户数") }}
                                <el-icon size="20"><UserFilled /></el-icon>
                            </div>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card style="background: linear-gradient(180deg, rgb(56 162 249), rgb(155 255 255))">
                    <el-statistic :value="13800">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                {{ $t("总订单数") }}
                                <el-icon size="20"><Tickets /></el-icon>
                            </div>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="background: linear-gradient(180deg, rgb(56 162 249), rgb(155 255 255))">
                    <el-statistic :value="5000">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                {{ $t("已完成订单") }}
                                <el-icon size="20"><Tickets /></el-icon>
                            </div>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="background: linear-gradient(180deg, rgb(56 162 249), rgb(155 255 255))">
                    <el-statistic :value="8800">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                {{ $t("剩余订单") }}
                                <el-icon size="20"><Tickets /></el-icon>
                            </div>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
        </el-row>

        <!-- <chinaMap></chinaMap> -->
        <el-row :gutter="0">
            <el-col :span="12">
                <el-card >
                    <chart1></chart1>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card >
                    <chart2></chart2>
                </el-card>
            </el-col>
        </el-row>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { httpSend } from "@/utils/api";
import { ref ,onMounted} from "vue";
import { useRouter} from 'vue-router';
//import * as echarts from 'echarts';
//import chinaMap from '../components/echarts/chinaMap.vue';
import chart1 from "../components/echarts/chart1.vue";
import chart2 from "../components/echarts/chart2.vue";
//@ts-ignore
import { iconMap } from "@/globalmethods";

onMounted(() => {

});


// 获取当前组件实例
const router = useRouter();
const functions = ref([
    { name: "人事档案", icon: "UserFilled", path: "/baseinfo/empinfo" },
    { name: "部门档案", icon: "School", path: "/baseinfo/deptinfo" },
    { name: "用户审批", icon: "Tickets", path: "/userset/userapproval" },
    { name: "用户管理", icon: "Avatar", path: "/userset/user" },
    { name: "功能管理", icon: "ElementPlus", path: "/functionset/permissionset" },
    { name: "操作日志", icon: "Postcard", path: "/userset/operatelog" },
    { name: "自定义页面", icon: "SetUp", path: "/functionset/customsizepage" },
    { name: "菜单管理", icon: "Memo", path: "/functionset/menuset" },
    { name: "角色管理", icon: "Location", path: "/userset/role" },
    { name: "系统参数", icon: "Document", path: "/systemsetting/systemsetting" },
    { name: "系统设置", icon: "Setting", path: "/systemsetting/systemparam" },
    { name: "更多功能", icon: "More", path: "/" },
    { name: "更多功能", icon: "More", path: "/" },
]);

const notice = ref([]);

const Gotopath = (item) => {
    if (item.path !== "/") {
        router.push(item.path);
    }
};

const test=()=>{
    missiondispatch();
}
//redis队列任务分发测试
const missiondispatch = async () => {
    const res = await httpSend('missiondispatch', {});
    if (res.data) {
        console.log('missiondispatch',res.data);
    }
};
</script>

<style scoped>
:deep(.el-card__header) {
    border-bottom: 1px solid var(--el-card-border-color);
    box-sizing: border-box;
    padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding);
    background-color: #18b4e3;
}

.flex-container {
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 横向居中对齐 */
    justify-content: center; /* 纵向居中对齐 */
    background: radial-gradient(circle at 50% 50%, rgb(9 232 255) 0%, rgb(25 200 255 / 20%) 80%) 50% 50%, linear-gradient(0deg, rgb(21 140 199) 0%, rgb(1 189 219) 100%) 50% 50%;;
    cursor: pointer; 
    transition: background 0.3s ease; /* 添加过渡效果 */
}

.flex-container:hover {
    background: radial-gradient(circle at 50% 50%, rgb(10 124 177) 0%, rgb(25 200 255 / 20%) 80%) 50% 50%, linear-gradient(0deg, rgb(40 180 249) 0%, rgb(70 236 245) 100%) 50% 50%;/* 鼠标悬停时的背景颜色 */
}

.flex-item {
    width: 100%; /* 让每个子元素占据一整行 */
    text-align: center; /* 子元素内容居中 */
    padding: 2px;
}
</style>
